<template>
  <div class="login_container">
    <div class="login_box">
      <!-- 头像区 -->
      <div class="avatar_box">
        <img src="@/assets/biglogo.png" alt="avatar" />
      </div>
      <!-- 登录表单 -->
      <div>
      <el-form class="login_form" ref="loginFormRef" label-width="80px">
        <el-form-item label="账号">
          <el-input v-model="loginForm.username" 
           @keyup.enter.native="onLoginBtnClick"
          prefix-icon="iconfont icon-iconzh1"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="loginForm.password"
           @keyup.enter.native="onLoginBtnClick"
          prefix-icon="iconfont icon-mima"></el-input>
        </el-form-item >
        <el-form-item class="btns" style="text-aline:center;">
          <el-button type="primary" @click="onLoginBtnClick">登陆</el-button>
          <el-button type="info" @click="resetLoginForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    </div>
    </div>
</template>
<script>
import { JSEncrypt } from "jsencrypt";
import localStorageUtil from "@/utils/localStorageUtil";
import {login } from '@/api/userApi';
export default {
  data() {
    var r = Math.floor(Math.random() * 1000000);
    return {
      loginForm: {
        username: 'admin',
        password: '123456'
      },
      isCaptchaValidate: 0,
      showStep: "loginform"
    };
  },
  watch: {
    // "loginForm.captcha": function(newData) {
    //   this.captchaValidate(newData);
    // }
  },
  methods: {
    // 表单重置按钮
    resetLoginForm () {
      this.$refs.loginFormRef.resetFields();
    },
    async onLoginBtnClick() {
      //this.$router.push('/home')
      if (this.formHasEmpty()) {
        return;
      }
      let res = await login({
        username: this.loginForm.username,
        password: this.loginForm.password,
        grant_type: 'password'
      })
      if (200 == res.code) {
        localStorageUtil.saveUserToken(res.data.token);
        this.$router.push({ path: "/configManage" });
      }
    },
    encryptedData(publicKey, data) {
      // 新建JSEncrypt对象
      let encryptor = new JSEncrypt();
      // 设置公钥
      encryptor.setPublicKey(publicKey);
      // 加密数据
      return encryptor.encrypt(data);
    },
    captchaValidate(val) {
      if (val && val.length == 4) {
        nt.doRequest({
          method: "GET",
          uri:
            "/message/messageplatform/v1/captcha/validate/" +
            this.loginForm.captchaID +
            "/" +
            this.loginForm.captcha,
          data: null,
          onSuccess: resp => {
            if (resp.data.content) {
              this.isCaptchaValidate = 1;
            } else {
              this.isCaptchaValidate = 2;
            }
          },
          onError: resp => {
            let description = resp.response.data.error.description;
            if (description == "验证码过期") {
              this.$message({
                showClose: true,
                message: "验证码过期,已刷新，请重新输入！",
                type: "warning"
              });
              this.refreshCaptcha();
            }
          }
        });
      } else {
        this.isCaptchaValidate = 2;
      }
    },
    // 表单校验
    formHasEmpty() {
      var point = {
        username: "账号不能为空！",
        password: "密码不能为空！",
        // captcha: "验证码不能为空！"
      };
      for (var key in point) {
        if (!this.loginForm[key]) {
          this.$message({
            showClose: true,
            message: point[key],
            type: "warning"
          });
          return true;
        }
      }
      // if (this.isCaptchaValidate !== 1) {
      //   this.$message({
      //     showClose: true,
      //     message: "验证码不正确，请输入正确的验证码！",
      //     type: "warning"
      //   });
      //   return true;
      // }
      return false;
    },
    
    refreshCaptcha() {
      this.loadCaptcha();
    },
    loadCaptcha() {
      var xmlhttp;
      var self = this;
      var r = Math.floor(Math.random() * 1000000);
      var url = "/message/messageplatform/v1/captcha/" + r;
      xmlhttp = new XMLHttpRequest();
      xmlhttp.open("GET", url, true);
      xmlhttp.responseType = "blob";
      xmlhttp.onload = function() {
        self.loginForm.captchaID = xmlhttp.getResponseHeader("Captcha-ID");
        if (this.status == 200) {
          self.captchaSrc = url;
        }
      };
      xmlhttp.send();
    },
  }
};
</script>
<style lang="less" scoped>
.login_container {
  background-color: #33C0FF;
  height: 100%;
  //background-color: #001528;
}
.login_box {
  width: 450px;
  height: 360px;
  background-color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
    .avatar_box {
    width: 130px;
    height: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px #ddd;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #eee;
    }
  }
}
.login_form {
  position: absolute;
  top: 30%;
  width: 90%;
  padding: 0 20px;
  box-sizing: border-box;
}
.btns {
  display: flex;
  justify-content: center;
  width: 410px;
  margin-left:0px;
  /deep/.el-form-item__content {
        margin-right: 80px;
  }
}
.info {
  font-size: 13px;
  margin: 10px 15px;
}
.captcha_img {
  width: 93%;
  margin-top: 6px;
}
</style>
